<template>
	<view class="yh_img">
		<view class="yh_img_">
			<image class="yh_img_content" :src="imageSrc" :mode="mode" :lazy-load="lazyLoad" :fade-show="fadeShow" :webp="webp" :show-menu-by-longpress="showMenuByLongpress" :draggable="draggable" @error="imgError" @load="imgLoad"></image>
		</view>
		
		<view v-if="loading_error" class="loading_error">
			<image src="loading_error_img" mode="aspectFit" :src="loadingErrorImg"></image>
		</view>
		<view v-if="loadingIngImg_" class="loading">
			<image class="loading_img" :src="loadingIngImg" mode="scaleToFill"></image>
		</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			imageSrc: {
				type: String,
				default: ""
			},
			mode: {
				type: String,
				default: "scaleToFill"
			},
			lazyLoad: {
				type: Boolean,
				default: false
			},
			fadeShow: {
				type: Boolean,
				default: true
			},
			webp: {
				type: Boolean,
				default: false
			},
			showMenuByLongpress: {
				type: Boolean,
				default: false
			},
			draggable: {
				type: Boolean,
				default: true
			},
			loadingErrorImg: {
				type: String,
				// default: require('../default_2.png'),
				default: "",
			},
			loadingIngImg: {
				type: String,
				// default: require('../default_2.png'),
				default: "",
			}
		},
		data() {
			return{
				loading_error: false,
				loadingIngImg_: true
			}
		},
		methods: {
			imgError(event) {
				this.loading_error = true
				this.$emit("error", event)
			},
			imgLoad(event) {
				console.log("加载完成")
				this.loadingIngImg_ = false
				this.$emit("load", event)
			}
		}
	}
</script>

<style lang="scss">
	.yh_img{
		width: 100%;
		height: 100%;
		position: relative;
		
		.yh_img_{
			width: 100%;
			height: 100%;
			position: absolute;
			
			.yh_img_content{
				width: 100%;
				height: 100%;
				position: relative;
			}
		}
		
		.loading_error{
			width: 100%;
			height: 100%;
			background-color: #F8F8F8;
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.loading_error_img{
				// width: 100rpx;
				// height: 100rpx;
				max-width: 100%;
				max-height: 100%;
			}
		}
		.loading{
			width: 100%;
			height: 100%;
			// background-color: #FFFFFF;
			position: relative;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			
			.loading_img{
				// width: 100rpx;
				// height: 100rpx;
				width: 100%;
				height: 100%;
			}
		}
	}
	
</style>
